<template>
    <div>
        <h1>CompA</h1>
        <h1>{{ age }}</h1>
        <h1>count: {{ count }}</h1>
        <button @click="age++">age++</button>
        <CompB />
    </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import CompB from './CompB.vue';
const name = ref("张三");
const age = ref(20);

const count = ref(0);
function setCount(newCount) {
    count.value = newCount;
}

// 提供数据
provide("name", name)
provide("age", age);

provide('count', {
    count, 
    setCount
})
</script>

<style scoped></style>